<script setup>
import "../../assets/data"
 import {ref,onMounted} from "vue"
 import axios from "axios"
 let txt=ref();
 onMounted(()=>{
    axios.get('/api/peisongzhong').then(ref=>{
    txt.value=ref.data.data
    console.log(ref)
    })
 })
</script>
<template>
    <div class="head" v-for="(item,index) in txt">
        <RouterLink to="/pszxq">
        <div class="above">
            <div class="numbering">{{ item.bianhao }}</div>
            <div class="reception">
                <div class="left">
                    <span class="harvest">收</span>
                    <span class="pickup">接</span>
                </div>
                <div class="right">
                    <div class="da">
                        <span class="ming">{{item.name[index]}}</span>
                        <span class="content">{{ item.dizhi }}</span>
                    </div>
                    <div class="da">
                        <span class="ming">{{ item.name[index+1] }}</span>
                        <span class="content">{{ item.dizhi }}</span>
                    </div>
                </div>
            </div>
            <div class="shijian">01:00</div>
            <div class="quxiao">20分钟订单未送达，订单自动取消</div>
        </div>
    </RouterLink>
    <RouterLink to="/pszxq">
       <div class="under">
           <div class="numbering">{{ item.bianhao }}</div>
           <div class="reception">
               <div class="left">
                   <span class="harvest">收</span>
                   <span class="pickup">接</span>
               </div>
               <div class="right">
                   <div class="da">
                       <span class="ming">{{item.name[index]}}</span>
                       <span class="content">{{ item.dizhi }}</span>
                   </div>
                   <div class="da">
                       <span class="ming">{{ item.name[index+1] }}</span>
                       <span class="content">{{ item.dizhi }}</span>
                   </div>
               </div>
           </div>
           <div class="shijian">01:00</div>
           <div class="quxiao">20分钟订单未送达，订单自动取消</div>
       </div>
    </RouterLink>
    </div>
</template>
<style scoped>
.head {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 550px;
    width: calc(100%-20px);
}
a {
    text-decoration: none;
    color: #111;
}
.above {
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px 10px 10px 10px;
}
.numbering {
    color: #ccc;
    font-size: 14px;
    height: 25px;
    border-bottom: 1px solid #ccc;
    width: 90%;
}

.reception {
    padding-top: 10px;
    display: flex;
    gap: 20px;
}

.left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.harvest {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #ccc;
    text-align: center;
    background-color: aqua;
}

.pickup {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #ccc;
    text-align: center;
    background-color: chartreuse;
}

.right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 3px;
}

.da {
    display: flex;
    gap: 20px;
}

.content {
    color: #ccc;
    font-size: 14px;
}

.shijian {
    text-align: center;
    font-size: 32px;
    color: #ccc;
    padding-top: 20px;
}

.quxiao {
    text-align: center;
    color: #ccc;
    font-size: 16px;
    padding-top: 10px;
}

.under{
    padding: 20px;
    background-color: white;
    border: #ccc 1px solid;
    border-radius: 10px 10px 10px 10px;
}
</style>